<template>
	<view class="role">
		<section>
			<view class="title">请选择你的身份</view>
			<view class="user-role">
				<view class="bg " @click="choose(2)">
					<view class="expert">
						<image src="../../static/svg/expert.svg" mode=""></image>
					</view>
					<text>我是有证专业人士</text>
				</view>
				<view class="bg " @click="choose(1)">
					<view class="custom">
						<image src="../../static/svg/custom.svg" mode=""></image>
					</view>
					<text class="u-line-2">我是邻居群众</text>
				</view>
			</view>
		</section>
	</view>
</template>

<script>
	import {
		userAppleMember,
		userDoctor
	} from '@/api/login/login.js'
	export default {

		methods: {
			choose(job) {
				// 1 会员  2 护航员
				let url = '/pages/message/message'
				let data = this.ws.getUserInfo()

				if (job == 1) {
					userAppleMember().then(res => {
						if (res.code) {
							data.job = 1
							this.ws.setUserInfo(data)
							uni.switchTab({
								url: url
							})
						} else {
							uni.showToast({
								title: res.msg
							})
						}
					})
				} else {
					userDoctor().then(res => {
						if (res.code) {
							data.job = 2
							this.ws.setUserInfo(data)
							uni.switchTab({
								url: url
							})
						} else {
							uni.showToast({
								title: res.msg
							})
						}
					})
				}

			},


		}
	}
</script>

<style lang="less">
	.role {
		height: 100vh;
		width: 100%;
		padding-top: 20%;

		section {
			padding: 0 20rpx;

			.title {
				font-weight: bold;
				font-size: 20px;
				margin: 40rpx 0;
			}

			.user-role {
				text-align: center;

				.bg {
					height: 220px;
					width: 95%;
					background-color: #F9F9F9;
					border-radius: 20rpx;
					margin: 20rpx auto;
					display: flex;
					flex-flow: column;
					justify-content: space-evenly;

					image {
						width: 163px;
						height: 163px;
					}

				}

				.bg:last-child {
					background-color: #EFF7F9;
				}
			}
		}
	}
</style>